import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import {
  Flex,
  Checkbox,
  ProductCard,
  Stepper,
  SwipeCell,
  Button,
  Dialog,
  SubmitBar,
} from "react-vant";
import {
  addCarActionCreator,
  deleteCarActionCreator,
  subCarActionCreator,
  submitOrderActionCreator,
  switchCarActionCreator,
  totalSwitchCarActionCreator,
} from "../../store/car/carReducer";
import { useCar } from "../../hooks/useCar";
import { useNavigate } from "react-router-dom";
import {
  createOrderActionCreator,
  OrderDetail,
} from "../../store/user/userReducer";
const Index: React.FC = () => {
  const carList = useSelector((state: RootState) => state.car.carList);
  const addressList = useSelector((state: RootState) => state.user.addressList);
  const { totalPrice, isTotalChecked, isSubmit } = useCar();
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const createOrder = () => {
    const data: OrderDetail = {
      id: new Date().getTime().toString(),
      price: totalPrice,
      title: "商品标题",
      addressDetail: addressList[0],
      createDateTime: new Date().getTime(),
      projects: carList.filter((v) => v.isChecked),
      state: "待付款",
    };

    dispatch(createOrderActionCreator(data));
    dispatch(submitOrderActionCreator());
    navigate("/order/" + data.id, { state: data });
  };

  return (
    <div>
      <div>
        {carList.map((v) => {
          return (
            <SwipeCell
              key={v.id}
              rightAction={
                <Button
                  type="danger"
                  square
                  style={{ height: "100%" }}
                  onClick={() =>
                    Dialog.confirm({
                      title: "确认要删除吗?",
                    })
                      .then(() => {
                        dispatch(deleteCarActionCreator(v));
                      })
                      .catch(() => {})
                  }
                >
                  删除
                </Button>
              }
            >
              <Flex align="center">
                <Flex.Item span={2}>
                  <Checkbox
                    checked={v.isChecked}
                    onChange={() => dispatch(switchCarActionCreator(v))}
                  ></Checkbox>
                </Flex.Item>
                <Flex.Item span={22}>
                  <ProductCard
                    num={
                      <Stepper
                        min={1}
                        defaultValue={v.count}
                        onPlus={() => dispatch(addCarActionCreator(v))}
                        onMinus={() => dispatch(subCarActionCreator(v))}
                      ></Stepper>
                    }
                    price={(+v.price).toFixed(2)}
                    desc={v.word}
                    title={v.title}
                    thumb={v.image}
                  ></ProductCard>
                </Flex.Item>
              </Flex>
            </SwipeCell>
          );
        })}
      </div>
      <SubmitBar
        style={{ bottom: 50 }}
        price={totalPrice * 100}
        buttonText="提交订单"
        onSubmit={() => {
          // 生成订单
          createOrder();
          // 进入订单详情页面
        }}
        disabled={!isSubmit}
      >
        <Checkbox
          checked={isTotalChecked}
          onChange={(checked) => dispatch(totalSwitchCarActionCreator(checked))}
        >
          全选
        </Checkbox>
      </SubmitBar>
    </div>
  );
};

export default Index;
